<template>
    <div class="content-panel">
        <div class="page-title">系统配置</div>
        <base-form :fields="fields" v-model="configs" label-width="160px" :key="key" class="w-7p" ref="formRef"/>
        <div class="buttons text-center w-7p mt-4">
            <el-button type="primary" icon="Checked" @click="save" v-perm="'edit'">保存</el-button>
        </div>
    </div>
</template>

<script setup name="sysConfig">
import { onMounted, ref } from "vue";
import { useSysStore } from "../../store";
import * as _ from "lodash";

const configs = ref({});
const store = useSysStore();
const fields = [
    { label: "是否启用顶部菜单", prop: "showTopMenus", type: "switch" },
    { label: "是否多标签展示", prop: "showTagsTab", type: "switch" },
    { label: "网站标题", prop: "title" },
    { label: "网站LOGO", prop: "logo", type: "imageUploader", multiple: false, remark: "请使用长宽比例一致的PNG图片" },
    {
        label: "默认主题",
        prop: "theme",
        type: "radioGroup",
        options: [
            { label: "默认", value: "default" },
            { label: "暗黑", value: "dark" },
        ],
        change: (val, form) => {
            if (val == "dark") {
                form.menu = "";
            }
        },
    },
    {
        label: "默认主题色",
        prop: "color",
        type: "radioGroup",
        options: [
            { label: "默认", value: "default" },
            { label: "红", value: "red" },
            { label: "绿", value: "green" },
        ]
    },
        {
            label: "左侧菜单色",
            prop: "menu",
            type: "radioGroup",
            display: (form) => {
                return form.theme == "default";
            },
            options: [
                { label: "默认", value: "" },
                { label: "白色", value: "white" },
                { label: "蓝色", value: "blue" },
                { label: "橙色", value: "orange" },
            ],
            remark: "注意，如果用户本身有设置主题，将以用户设置的为准",
        },
    {
        label: "启用验证码短信",
        prop: "messageEnabled",
        type: "switch",
        display: () => {
            // 只有超管时展示
            var tenantId = store.getUserInfo().currentTenantId;
            return tenantId == "00000" || tenantId == "sys";
        },
    },
    {
        label: "短信渠道",
        prop: "message.channel",
        type: "radioGroup",
        options: [
            { label: "阿里", value: "ali" },
        ],
        display: (form) => form.messageEnabled,
        required: true,
    },
    { label: "短信验证码模板", prop: "message.template", display: (form) => form.messageEnabled, required: true },
    { label: "渠道商key", prop: "message.key", display: (form) => form.messageEnabled, required: true },
    { label: "渠道商secret", prop: "message.secret", display: (form) => form.messageEnabled, required: true },
    { label: "短信签名", prop: "sign", display: (form) => form.messageEnabled, required: true },
];
const key = ref("");
const formRef = ref();

onMounted(() => {
    app.https.get("/sys/config/find-by-code/sysConfig").then((resp) => {
        resp = JSON.parse(resp.value);
        if (!resp.theme) {
            resp.theme = "default";
        }
        if (!resp.color) {
            resp.color = "default";
        }
        if (!resp.message?.channel) {
            resp.message = {
                channel: "",
            };
        }
        configs.value = resp;
        key.value = resp.id;
    });
});

function save() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https.put("/sys/config/update", { id: "sysConfig", value: JSON.stringify(configs.value) }).then(() => {
            store.setSysConfig(_.cloneDeep(configs.value));

            app.success("操作成功");
        });
    });
}
</script>
